<fieldset>
    <legend>Thêm tài khoản</legend>
    <?php
    $icon_dir = $this->Html->assetUrl('img/icons/');
    $icon_dir_code = <<< EOS
    var ICON_DIR = '{$icon_dir}';
EOS;
    echo $this->Html->scriptBlock($icon_dir_code, array('inline' => FALSE));
    $path = WWW_ROOT . 'img' . DS . 'icons' . DS . '{*.png, *.jpg, *.jpeg, *.gif}';
    $icons = glob($path, GLOB_BRACE);
    echo $this->Form->create('Account', array('class' => 'form-horizontal col-md-6 col-md-offset-3',
        'inputDefaults' => array(
            'class' => 'form-control',
            'div' => array('class' => 'form-group')
    )));
    echo $this->Form->input('name', array('label' => 'Tên'));
    echo $this->Form->input('money_unit', array('label' => 'Ký hiệu tiền tệ'));
//echo $this->Form->input('icon_path', array('label' => 'Icon'));
    ?>
    <div class="form-group">
        <label for="AccountIconPath">Icon</label>
        <?php
        $icon_path = empty($this->request->data['Account']['icon_path']) ? 'Question-icon.png' : $this->request->data['Account']['icon_path'];
        echo $this->Form->hidden('icon_path', array('value' => $icon_path));
        echo '<div class="thumbnail">';
        echo $this->Html->image('icons/' . $icon_path, array('id' => 'icon-holder'));
        echo '</div>';
        ?>
    </div>
    <?php
    echo $this->Form->input('balance', array('label' => 'Số dư hiện tại'));
    echo $this->Form->input('description', array('label' => 'Mô tả'));
    echo '<div class="form-group">';
    echo $this->Form->submit('Save', array('class' => 'btn btn-primary', 'div' => false)) . '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    echo $this->Html->link('Quay lại', array('action' => 'index'), array('class' => 'btn btn-default', 'style' => 'line-height: normal'));
    echo '</div>';
    echo $this->Form->end();
    ?>
</fieldset>

<!-- Modal -->
<div class="modal fade" id="iconPickerModal" tabindex="-1" role="dialog" aria-labelledby="iconPickerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="iconPickerModalLabel">Chọn icon</h4>
            </div>
            <div class="modal-body">
                <select id="AccountIconPathSelector" class="image-picker">
                    <?php
                    foreach ($icons as $icon) {
                        echo '<option data-img-src="' . $this->Html->assetUrl('img/icons/' . basename($icon)) . '" value="' . basename($icon) . '"';
                        if ('Question-icon.png' == basename($icon)) {
                            echo ' selected';
                        }
                        echo '></option>';
                    }
                    ?>
                </select>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    $(".image-picker").imagepicker({
        selected: function() {
            $("#iconPickerModal").modal("hide");
            $("#AccountIconPath").val($("#AccountIconPathSelector").val());
            $("#icon-holder").attr("src", ICON_DIR + $("#AccountIconPathSelector").val());
        }
    });
    $("#icon-holder").click(function() {
        $("#iconPickerModal").modal("show");
    });
</script>